<template>
    <div class="bg flex">
      <div class="content-div">
        <el-form ref="userInfoForm" :model="userInfo" label-width="100px">
          <el-form-item label="ID">
            <el-input v-model="userInfo.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
    
          <el-form-item>
            <el-button type="primary" @click="submitUserInfo">提交信息</el-button>
            <el-button type="primary" @click="toggleChangePassword">{{ showChangePassword ? '取消修改密码' : '修改密码' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
    
          <!-- 修改密码表单项 -->
          <el-form v-if="showChangePassword" ref="passwordForm" :model="passwords" label-width="100px">
            <el-form-item label="原密码" prop="oldPassword">
              <el-input v-model="passwords.oldPassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="passwords.newPassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="passwords.confirmPassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitPasswordChange">提交密码</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </div>
    </div>
  </template>
    
  <script>
  import { getUserInfo, updateUserInfo, updatePassword } from '@/util/request'; // 请根据实际路径修改
    
  export default {
    name: 'Uinfo',
    data() {
      return {
        userInfo: {
          id: '', // 初始化为空，后续填充
          username: '', // 初始化为空，后续填充
          nickname: '',
          email: ''
        },
        originalUserInfo: {}, // 保存初始用户信息的副本
        passwords: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        showChangePassword: false // 控制是否显示修改密码表单项
      };
    },
    methods: {
      toggleChangePassword() {
        this.showChangePassword = !this.showChangePassword;
        // 清空密码输入框
        this.passwords.oldPassword = '';
        this.passwords.newPassword = '';
        this.passwords.confirmPassword = '';
      },
      async submitUserInfo() {
        try {
          const valid = await this.$refs.userInfoForm.validate();
          if (!valid) return;
    
          // 提交用户基本信息的逻辑
          console.log('提交用户信息：', this.userInfo);
          // 在此添加调用提交基本信息接口的代码
          const res = await updateUserInfo(this.userInfo);
          if (res.status === 0) {
            this.$message.success('用户信息更新成功');
            this.originalUserInfo = { ...this.userInfo }; // 更新初始用户信息
          } else {
            this.$message.error(res.message || '用户信息更新失败');
          }
    
        } catch (error) {
          console.error('提交用户信息失败', error);
          this.$message.error('提交用户信息失败');
        }
      },
      async submitPasswordChange() {
        try {
          const valid = await this.$refs.passwordForm.validate();
          if (!valid) return;
    
          // 检查新密码与确认密码是否一致
          if (this.passwords.newPassword !== this.passwords.confirmPassword) {
            this.$message.error('新密码与确认密码不一致');
            return;
          }
    
          // 调用修改密码接口
          const res = await updatePassword({
            oldPwd: this.passwords.oldPassword,
            newPwd: this.passwords.newPassword
          });
          if (res.status === 0) {
            this.$message.success('密码修改成功');
            // 清空密码输入框
            this.passwords.oldPassword = '';
            this.passwords.newPassword = '';
            this.passwords.confirmPassword = '';
            this.showChangePassword = false;
          } else {
            this.$message.error(res.message || '密码修改失败');
          }
        } catch (error) {
          console.error('修改密码失败', error);
          this.$message.error('修改密码失败');
        }
      },
      resetForm() {
        this.$refs.userInfoForm.resetFields();
        this.userInfo = { ...this.originalUserInfo }; // 恢复初始用户信息
        // 清空密码输入框
        if (this.showChangePassword) {
          this.passwords.oldPassword = '';
          this.passwords.newPassword = '';
          this.passwords.confirmPassword = '';
        }
      }
    },
    async mounted() {
      // 获取用户信息并填充表单
      try {
        const res = await getUserInfo();
        if (res.status === 0) {
          this.userInfo = res.data;
          this.originalUserInfo = { ...res.data }; // 保存初始用户信息的副本
        } else {
          this.$message.error(res.message || '获取用户信息失败');
        }
      } catch (error) {
        console.error('获取用户信息失败', error);
        this.$message.error('获取用户信息失败');
      }
    }
  };
  </script>
    
  <style scoped>
  .bg {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
    animation: hueRotate 10s infinite alternate;
    overflow: scroll;
  }
  
  @keyframes hueRotate {
    100% {
      filter: hue-rotate(360deg);
    }
  }
  
  .title {
    font-size: 50px;
    text-align: center;
  }
  
  .content-div {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    margin: auto;
    padding: 50px;
    margin-top: 100px;
    height: auto;
    width: 80%;
    border: 2px solid;
  }
  
  .article_head {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .creat_btn {
    margin-right: 10px;
  }
  
  .example-pagination-block+.example-pagination-block {
    margin-top: 10px;
  }
  
  .divdiv {
    margin-right: 300px;
  }
  
  .article_content {
    border: 2px solid;
    border-radius: 15px;
    padding: 20px;
  }
  
  .like_btn {
    margin-left: 20px;
  }
  
  .comment-item {
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 2px solid #ddd;
  }
  
  .reply-list {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
  }
  
  .reply-item {
    margin-bottom: 10px;
  }
  
  .comment-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .comment-section {
    margin-bottom: 20px;
  }
  </style>
  